<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>百度地图</title>
		<style type="text/css">
			html {
				height: 100%
			}

			body {
				height: 100%;
				margin: 0px;
				padding: 0px
			}

			#mapPage{
				height: 100%;
				position: relative;
			}
			
			#container {
				height: 100%
			}
			
			.conter{
				width: 30%;
				height: 60px;
				line-height: 60px;
				/* 毛玻璃效果 */
				background: rgba( 255, 255, 255, 0.20 );
				box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
				backdrop-filter: blur( 4.5px );
				-webkit-backdrop-filter: blur( 4.5px );
				border-radius: 10px;
				border: 1px solid rgba( 255, 255, 255, 0.18 );
				position: absolute;
				right: 6px;
				text-align: center;
				font-weight: bold;
				z-index: 1000;
			}
			
			.normal{
				top: 40px;
				color: #19be6b;
			}
			
			.warn{
				top: 110px;
				color: #ff9900;
			}
			
			.error{
				top: 180px;
				color: #fa3534;
			}
		</style>
	</head>
	<body>
		<div id='mapPage'>
			<div id='container'></div>
		</div>
	</body>
	
	<!-- 微信 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件 -->
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
	<!-- uni 的 SDK -->
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
	</script>
	<!-- 百度地图 -->
	<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ARNfgZLNVgpyYSQLo7L6QXt7TzFavgOD"></script>
	<!-- 引入jquery -->
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
	<script type="text/javascript">
		document.addEventListener('plusready', function() {
			console.log("111")
			 var ret = plus.storage.getItem('storage_key')
			 console.log(ret,"retaaaaaaaaaaa")
		})
	</script>
	<script type="text/javascript">
	
		
		document.addEventListener('UniAppJSBridgeReady', function() {
			 // const value=uni.getStorageSync('storage_key');
			$('.normal').click(function(){
				goDetailPage('normal');
			})
			
			$('.warn').click(function(){
				goDetailPage('warn');
			})
			
			$('.error').click(function(){
				goDetailPage('error');
			})
			
			// 跳转到列表详情页面
			function goDetailPage(type){
				uni.navigateTo({
					url: `/pages/alarmListDetail/alarmListDetail?type=${type}`
				})
			}	
			
			// ------------------------------------  配置百度地图  --------------------------------------------------------------------------------
			
			
			var map = new BMap.Map("container"); // 创建地图实例
			var point = new BMap.Point(113.567845, 34.823527); // 创建点坐标 
			map.centerAndZoom(point, 17); // 初始化地图，设置中心点坐标和地图级别
			map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

			var scaleCtrl = new BMap.ScaleControl(); // 添加比例尺控件
			map.addControl(scaleCtrl);
			// var zoomCtrl = new BMap.ZoomControl(); // 添加缩放控件
			// map.addControl(zoomCtrl);
			var cityCtrl = new BMap.CityListControl(); // 添加城市列表控件
			map.addControl(cityCtrl);
			console.log(cityCtrl, "cityCtrl")

			// 添加标注点
			var marker = new BMap.Marker(point); // 创建标注   
			map.addOverlay(marker); // 将标注添加到地图中’
			// 监听标注事件
			marker.addEventListener("click", function() {
				console.log("您点击了标注");
				// 跳转到厂区地图页面
				uni.navigateTo({
					url: '/pages/factoryMap/factoryMap'
				})
			});

			// 向地图中添加文本标注
			var content = "国家863软件园";
			var label = new BMap.Label(content, { // 创建文本标注
				position: point, // 设置标注的地理位置
				offset: new BMap.Size(0, 0) // 设置标注的偏移量
			})
			map.addOverlay(label); // 将标注添加到地图中
			label.setStyle({ // 设置label的样式
				color: '#000',
				fontSize: '30px',
				border: '2px solid #1E90FF'
			})
			// 监听标注事件
			label.addEventListener("click", function() {
				alert("您点击了标注");
			});
		});
	</script>
</html>
